<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" href="/element-ui/index.css">
    <style>
        body {
            background: #f5f6fa;
            font-family: 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Arial', sans-serif;
            margin: 0;
            padding: 0;
        }
        .home-container {
            max-width: 1200px;
            margin: 40px auto 0 auto;
            background: #fff;
            border-radius: 16px;
            box-shadow: 0 4px 24px rgba(64,158,255,0.08);
            padding: 32px 36px 32px 36px;
        }
        .announcement {
            background: linear-gradient(90deg, #409EFF 60%, #74ebd5 100%);
            color: #fff;
            border-radius: 8px;
            padding: 12px 24px;
            font-size: 16px;
            margin-bottom: 28px;
            letter-spacing: 1px;
            box-shadow: 0 2px 8px rgba(64,158,255,0.10);
        }
        .welcome {
            font-size: 22px;
            font-weight: 600;
            color: #222;
            margin-bottom: 32px;
            text-align: center;
        }
        .current-time {
            font-size: 18px;
            color: #409EFF;
            margin-bottom: 24px;
        }
        .stats {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            gap: 18px;
        }
        .stat-card {
            flex: 1;
            background: #f7faff;
            border-radius: 12px;
            padding: 24px 0 18px 0;
            box-shadow: 0 2px 8px rgba(64,158,255,0.06);
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .stat-label {
            font-size: 15px;
            color: #888;
            margin-bottom: 8px;
        }
        .stat-value {
            font-size: 28px;
            font-weight: bold;
            color: #409EFF;
        }
        .quick-actions {
            margin: 36px 0 24px 0;
            display: flex;
            gap: 32px;
            justify-content: center;
        }
        .quick-actions .admin-actions {
            display: flex;
            flex-direction: row;
            gap: 32px;
            width: 100%;
            justify-content: center;
        }
        .quick-action-card {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 180px;
            height: 110px;
            background: linear-gradient(135deg, #409EFF 80%, #74ebd5 100%);
            color: #fff;
            border-radius: 18px;
            box-shadow: 0 4px 16px rgba(64,158,255,0.13);
            font-size: 18px;
            font-weight: 500;
            cursor: pointer;
            transition: transform 0.18s, box-shadow 0.18s;
            position: relative;
        }
        .quick-action-card:hover {
            transform: translateY(-4px) scale(1.04);
            box-shadow: 0 8px 24px rgba(64,158,255,0.22);
            background: linear-gradient(135deg, #66b1ff 80%, #74ebd5 100%);
        }
        .quick-action-icon {
            font-size: 36px;
            margin-bottom: 10px;
        }
        .quick-action-label {
            font-size: 17px;
            font-weight: 600;
            letter-spacing: 1px;
        }
        .charts-row {
            display: flex;
            gap: 32px;
            margin-bottom: 32px;
        }
        .chart-box {
            flex: 1;
            background: #f7faff;
            border-radius: 12px;
            padding: 18px 8px 8px 8px;
            box-shadow: 0 2px 8px rgba(64,158,255,0.06);
            min-width: 320px;
            min-height: 320px;
        }
        .chart-title {
            text-align: center;
            font-size: 16px;
            color: #409EFF;
            margin-bottom: 8px;
            font-weight: 500;
        }
        .latest-row {
            display: flex;
            gap: 32px;
        }
        .latest-block {
            flex: 1;
            background: #f7faff;
            border-radius: 12px;
            padding: 18px 18px 8px 18px;
            box-shadow: 0 2px 8px rgba(64,158,255,0.06);
            min-width: 220px;
        }
        .latest-title {
            font-size: 16px;
            color: #409EFF;
            font-weight: 500;
            margin-bottom: 10px;
        }
        .latest-list {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .latest-list li {
            font-size: 15px;
            color: #333;
            margin-bottom: 6px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .latest-list li .el-tag {
            margin-left: 6px;
        }
    </style>
</head>
<body>
<div class="home-container">
    <div class="announcement" th:text="${announcement}">欢迎使用教材管理系统！如有问题请联系管理员。</div>
    <div class="welcome">
        <span th:if="${user.status == 1}">欢迎管理员，<span th:text="${user.username}"></span> 登录教材管理系统！</span>
        <span th:if="${user.status != 1}">欢迎，<span th:text="${user.realName}"></span><span th:if="${user.department != null}">（<span th:text="${user.department}"></span>）同学</span>，登录系统！</span>
    </div>
    <div class="current-time" id="currentTime" style="text-align:center;font-size:18px;color:#409EFF;margin-bottom:24px;"></div>
    <div class="quick-actions">
        <div class="admin-actions" th:if="${user.status == 1}">
            <div class="quick-action-card" onclick="window.location.href='/book/add'">
                <i class="el-icon-notebook-2 quick-action-icon"></i>
                <div class="quick-action-label">新增教材</div>
            </div>
            <div class="quick-action-card" onclick="window.location.href='/publisher/add'">
                <i class="el-icon-office-building quick-action-icon"></i>
                <div class="quick-action-label">新增出版社</div>
            </div>
            <div class="quick-action-card" onclick="window.location.href='/order/add'">
                <i class="el-icon-s-order quick-action-icon"></i>
                <div class="quick-action-label">新增订单</div>
            </div>
            <div class="quick-action-card" onclick="window.location.href='/user/list'">
                <i class="el-icon-user quick-action-icon"></i>
                <div class="quick-action-label">用户管理</div>
            </div>
        </div>
        <div th:if="${user.status != 1}" style="display: flex; flex-direction: row; gap: 32px; justify-content: center;">
            <div class="quick-action-card" onclick="window.location.href='/user/changePassword'">
                <i class="el-icon-edit quick-action-icon"></i>
                <div class="quick-action-label">修改密码</div>
            </div>
            <div class="quick-action-card" onclick="window.location.href='/user/profile'">
                <i class="el-icon-user quick-action-icon"></i>
                <div class="quick-action-label">查看个人信息</div>
            </div>
            <div class="quick-action-card" onclick="window.location.href='/order/add'">
                <i class="el-icon-s-order quick-action-icon"></i>
                <div class="quick-action-label">订购教材</div>
            </div>
        </div>
    </div>
    <div class="latest-row" th:if="${user.status == 1}" style="display:flex;gap:32px;margin-top:36px;">
        <div class="latest-block">
            <div class="latest-title">最新用户</div>
            <ul class="latest-list">
                <li th:each="u : ${latestUsers}" th:text="${u.username} + '（' + ${u.realName} + '）'"></li>
            </ul>
        </div>
        <div class="latest-block">
            <div class="latest-title">最新教材</div>
            <ul class="latest-list">
                <li th:each="b : ${latestBooks}" th:text="${b.name}"></li>
            </ul>
        </div>
        <div class="latest-block">
            <div class="latest-title">最新出版社</div>
            <ul class="latest-list">
                <li th:each="p : ${latestPublishers}" th:text="${p.name}"></li>
            </ul>
        </div>
        <div class="latest-block">
            <div class="latest-title">最新订单</div>
            <ul class="latest-list">
                <li th:each="o : ${latestOrders}" th:text="${o.orderNo}"></li>
            </ul>
        </div>
    </div>
</div>
<script src="/element-ui/vue.js"></script>
<script src="/element-ui/index.js"></script>
<script>
    // 实时更新时间
    function updateCurrentTime() {
        var now = new Date();
        var y = now.getFullYear();
        var m = (now.getMonth() + 1).toString().padStart(2, '0');
        var d = now.getDate().toString().padStart(2, '0');
        var h = now.getHours().toString().padStart(2, '0');
        var min = now.getMinutes().toString().padStart(2, '0');
        var s = now.getSeconds().toString().padStart(2, '0');
        var str = y + '-' + m + '-' + d + ' ' + h + ':' + min + ':' + s;
        document.getElementById('currentTime').innerText = str;
    }
    setInterval(updateCurrentTime, 1000);
    updateCurrentTime();
</script>
</body>
</html> 